<template>
  <div>
    <div class="header">
      <div class="header-title subheading-heavy body-content">
        {{ nowString }}
      </div>
      <ul class="paragraph-p2-light" :key="key.tab">
        <li>
          <a :class="tab === todoListItemType.waiting ? 'todo-nav-active': '' "
             @click="tabCLick(todoListItemType.waiting)"
          >待办</a>
        </li>
        <li>
          <a :class="tab === todoListItemType.done ? 'todo-nav-active': '' "
             @click="tabCLick(todoListItemType.done)"
          >已完成</a>
        </li>
      </ul>
      <div class="todo-main-top" v-if="tab === todoListItemType.done">
        <div class="todo-main-top-left">{{ ifShowAll ? '全部' : '最近10项' }}</div>
        <div class="todo-main-top-right" @click="ifShowAll = !ifShowAll; key.done = new Date().getTime()">
          <a>{{ ifShowAll ?  '仅显示最近10项' : '显示所有' }}</a>
        </div>
      </div>
    </div>
    <div v-if="tab === todoListItemType.waiting" class="todoWaitingTab">
      <main-empty v-if="count.waiting === 0"
                  class="margin-top-div-260"
                  :list-code="todoListType"
                  :list-item-code="todoListItemType.waiting"
      ></main-empty>
      <item-list v-if="count.waiting > 0"
                 :key="key.waiting"
                 :list-code="todoListType"
                 :list-item-code="todoListItemType.waiting"
                 v-on:itemNumRefreshEvent = "todoListNumInit"
      ></item-list>
      <button-right :type="todoListType" @click.native="ifShowAdd = true;key.addTextarea = new Date().getTime();"></button-right>
      <van-action-sheet v-model="ifShowAdd">
        <todo-textarea :title="addTitle" :key="key.addTextarea"
                       v-on:itemNumRefreshEvent = "todoListNumInit"
                       v-on:todoTextareaLeftEvent = "todoTextareaLeft"
                       v-on:todoSureConfirmEvent = "addTodo"
        ></todo-textarea>
      </van-action-sheet>
    </div>
    <div v-if="tab === todoListItemType.done" class="todoDoneTab" :class="count.done === 0 ? 'div-align-justify-center' : ''">
      <main-empty v-if="count.done === 0"
                  class="margin-top-div-260"
                  :list-code="todoListType"
                  :list-item-code="todoListItemType.done"
      ></main-empty>
      <template v-if="count.done > 0">
        <item-list :key="key.done"
                   :limit-page="ifShowAll ? 0 : 1"
                   :list-code="todoListType"
                   :list-item-code="todoListItemType.done"
        ></item-list>
      </template>
    </div>
  </div>
</template>

<script>
import MainEmpty from "@/components/MainEmpty"
import ButtonRight from "@/components/Button/Right"
import TodoTextarea from '@/components/todo/textarea'
import ItemList from '@/components/ItemList'
import {ActionSheet, Toast} from 'vant'
import { createTask, getTaskStatusCount } from "@/request/api";

export default {
  name: "TodoViewMain",
  components: {
    [ActionSheet.name]: ActionSheet,
    ItemList,
    MainEmpty,
    ButtonRight,
    TodoTextarea,
  },
  props: {},
  data() {
    return {
      tab: this.GLOBAL.listItemType.todo.waiting,
      todoListType: this.GLOBAL.listType.todo,
      todoListItemType: this.GLOBAL.listItemType.todo,
      nowString: '',
      ifShowAdd: false,
      ifShowAll: false,
      ifShowTip: false,
      canAdd: true,
      addTitle: '增加',
      count: {
        waiting: 1,
        done: 0,
      },
      key: {
        waiting: new Date().getTime(),
        done: new Date().getTime(),
        tab: new Date().getTime(),
        addTextarea: new Date().getTime(),
      },
    };
  },
  mounted() {
    this.setNowTimes()
    this.todoListNumInit()
  },
  methods: {
    tabCLick(tab) {
      this.tab = tab
      this.$router.push(this.GLOBAL.pathSetting.todo.main + '?tab=' + tab)
      switch (tab) {
        case this.todoListItemType.waiting:
          this.key.waiting = new Date().getTime()
          break
        case this.todoListItemType.done:
          this.key.done = new Date().getTime()
          break
      }
    },
    setNowTimes() {
      let myDate = new Date();
      let wk = myDate.getDay();
      let mm = myDate.getMonth() + 1;
      let dd = String(myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate())
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowString = "今天" + mm + "月" + dd + "日" + " " + week;
    },
    todoListNumInit() {
      getTaskStatusCount().then(res => {
        const {State, Msg, Data} = res
        if (State) {
          for (let i = 0; i < Data.length; i++) {
            const {name, count} = Data[i]
            switch (name) {
              case '待办':
                this.count.waiting = count
                break;
              case '已完成':
                this.count.done = count
                break;
            }
          }
          this.key.waiting = new Date().getTime()
          this.key.done = new Date().getTime()
        } else { Toast(Msg) }
      }).catch(()=>{})
    },
    addTodo(value) {
      if (this.canAdd) {
        this.$loading.show()
        this.canAdd = false
        createTask({ task_description: value}).then(res => {
          const { State, Msg } = res
          if (State) {
            this.ifShowAdd = false
            this.key.waiting = new Date().getTime()
            this.todoListNumInit()
            this.canAdd = true
          } else { Toast(Msg) }
          this.$loading.close()
        }).catch(() => {this.canAdd = true;this.$loading.close();})
      }

    },
    todoTextareaLeft() {
      this.ifShowAdd = false
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 116px;
  background-color: #fcd538;
  top: 0;
  position: fixed;
  z-index: 3;
}

.header-title {
  padding-top: 52px;
}

ul {
  padding-left: 16px;
  background-color: #fcd538;
  padding-top: 16px;
}

ul li {
  display: inline;
  margin-right: 24px;
  height: 22px;
  padding-bottom: 5px;
}

ul a {
  color: #424242;
  text-decoration: none;
}

.todo-main-top {
  height: 38px;
  padding: 0 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff5cc;
}

.todo-main-top-left {
  width: 50%;
  text-align: left;
}

.todo-main-top-right {
  width: 50%;
  text-align: right;
  text-decoration: underline;
}
.todoWaitingTab {
  margin-top: 120px;
}
.todoDoneTab {
  margin-top: 155px;
}
</style>